import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import {Button, Modal, Form, Input, message, Icon, Select} from "antd";

class MeetingDetail extends Component {
    constructor(props) {
        super(props);

        this.state = {visible: false}
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // message.success('Received values of form: ', values.DISCIPLINE);
                message.info(`Click on item ${values.DISCIPLINE}`);
                console.log(values);
            }
        });
    };

    render() {
        const Option = Select.Option;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 18},
            },
        };

        return (
            <div className="education-set-score education-set-subject education-set-meeting">
                <div className="education-set row">
                    <div className="text-center">
                        <h2>会议通知</h2>
                        <div className="welding-set-gutter-line">
                            <hr/>
                            <span/>
                            <hr/>
                        </div>
                        <h3>MEETING NOTICE</h3></div>
                </div>
                <div className="association-news">
                    <div className="clearfix mrt20">
                        <div className="pull-left mrr20">
                            <img src="http://temp.im/680x280" alt="..."/>
                        </div>
                        <div className="pull-left">
                            <h3 className="color1 clear-mrt">第23届北京-埃森焊接与切割展览</h3>
                            <div className="well bc1">
                                <p><Icon className="icon-set" type="environment" theme="filled"/>
                                    举办地址：上海市博兴路8000号</p>
                                <p><Icon className="icon-set" type="calendar" theme="filled"/>
                                    举办时间：2018-12-25~2019-12-25</p>
                                <p><Icon className="icon-set" type="home" theme="filled"/> 主办方：上海市焊接协会
                                    XXXX有限公司</p>
                            </div>
                            <div className="mrt30">
                                <Button className="mrr20 btn-warning" size={"large"}
                                        onClick={this.showModal}>报名培训</Button>
                                <Button type="primary" size={"large"}><NavLink exact to="/score_inquiry">成绩查询</NavLink></Button>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="association-news">
                    <h4 className="after-line"><span><b>详细介绍</b></span></h4>
                    <div className="well">
                        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                    </div>
                </div>

                <Modal
                    destroyOnClose={true}
                    visible={this.state.visible}
                    bodyStyle={{padding: "24px 60px"}}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>取消操作</Button>,
                        <Button key="submit" htmlType='submit' type="primary" onClick={this.handleSubmit}>
                            确认提交
                        </Button>]}>

                    <h3 className="text-center color1 clear-mrt">会议报名</h3>
                    <h5 className="mrt30">会议主题：API570管道检验师ICP培训</h5>
                    <Form onSubmit={this.handleSubmit} className="set-input-pad">
                        <Form.Item>
                            {
                                getFieldDecorator('COMPANY', {
                                    initialValue: '',
                                    rules: [
                                        {
                                            required: true,
                                            message: '企业名称'
                                        },
                                        // {
                                        //     min: 5, max: 10,
                                        //     message: '长度不在范围内'
                                        // },
                                        // {
                                        //     pattern: new RegExp('^\\w+$', 'g'),
                                        //     message: '用户名必须为字母或者数字'
                                        // }
                                    ]
                                })(<Input prefix={<Icon type="shop"/>} placeholder="企业名称"/>)
                            }
                        </Form.Item>

                        <Form.Item>
                            {
                                getFieldDecorator('NAME', {
                                    initialValue: '',
                                    rules: [{
                                        required: true,
                                        message: '姓名'
                                    },]
                                })(<Input prefix={<Icon type="user"/>} placeholder="姓名"/>)
                            }
                        </Form.Item>

                        <Form.Item>
                            {
                                getFieldDecorator('PHONE', {
                                    initialValue: '',
                                    rules: [{
                                        required: true,
                                        message: '手机号码不能为空'
                                    },]
                                })(<Input prefix={<Icon type="phone"/>} placeholder="请输入考试报名手机号码"/>)
                            }
                        </Form.Item>

                        <Form.Item>
                            {
                                getFieldDecorator('EMAIL', {
                                    initialValue: '',
                                    rules: [{
                                        required: true,
                                        message: '邮箱'
                                    },]
                                })(<Input prefix={<Icon type="mail"/>} placeholder="邮箱"/>)
                            }
                        </Form.Item>

                        <Form.Item {...formItemLayout} label="报名参加人数：">
                            {
                                getFieldDecorator('DISCIPLINE')(<Select placeholder="--请选择人数--">
                                    <Option value="jack">1</Option>
                                    <Option value="lucy">2</Option>
                                    <Option value="Yiminghe">3</Option>
                                </Select>)
                            }
                        </Form.Item>

                        {/*<Form.Item>*/}
                        {/*<Button style={{width: "100%"}} type="primary" htmlType="submit"*/}
                        {/*className="login-form-button">*/}
                        {/*确认查询*/}
                        {/*</Button>*/}
                        {/*</Form.Item>*/}
                        <div className="text-danger">
                            <small>注意：以上信息请认真人填写。
                            </small>
                        </div>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default Form.create()(MeetingDetail);
